package com.snow.useviewdemo.html;

import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.ValueCallback;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.TextView;
import android.widget.Toast;

import com.snow.common.base.BaseBasesActivity;
import com.snow.useviewdemo.R;

import org.json.JSONArray;
import org.json.JSONException;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

/**
 * author : zyt
 * e-mail : 632105276@qq.com
 * date   : 2019-09-09
 * desc   :通过webview加载html代码（包含图片）
 */
public class HtmlWebViewShowAct extends BaseBasesActivity {

    @BindView(R.id.tbs_webview)
    TBSWebView tbsWebview;
    @BindView(R.id.textView)
    TextView textView;

    @Override
    protected int getContentViewId() {
        return R.layout.act_html_webview_show;
    }

    @Override
    protected void initView() {
        String textmsg = "1、好友详情页变化\n" +
                "\n" +
                "新版在点击右侧的更多选项时，会一次把所有可选项列举出来。而且，去掉了正式版那些选项的小图标，可选项没有什么变化，连排序都是一样的。\n" +
                "\n" +
                "2、发送图片功能发生变化\n" +
                "\n" +
                "在给好友发送图片时，会发现内测版的功能相较正式版也做了较大的改动。\n" +
                "\n" +
                "内测版把文件夹的选项放到了上边，并加上了一个椭圆形的边框。除此之外，“预览”和“原图“功能的位置做了调整。\n" +
                "\n" +
                "3、公众号详情页发生变化\n" +
                "\n" +
                "在点开右上的更多选项时，对比后可以发现，最新内测版微信的公众号把许多选项都挪到了正中间，和正式版对比，会发现多了一个“取消”选项。\n" +
                "\n" +
                "4、小程序页面等可选项发生变化\n" +
                "\n" +
                "打开小程序的更多可选项后，会发现界面风格有了完全不一样的变化，内测版的小程序可选项是横向布局，正式版为竖排。";
        textView.setText(textmsg);

        tbsWebview.getSettings().setJavaScriptEnabled(true);
        tbsWebview.addJavascriptInterface(new JsObject(), "android");

        String msg = "<!DOCTYPE html> <html lang=\"en\">  <head>     <meta charset=\"UTF-8\">     <meta name=\"viewport\" content=\"initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width\">     <style>         * {             margin: 0;             padding: 0         }          img {             width: 100%;         }     </style> </head>  <body>     <h1         style=\"font-size: 2.5rem;margin: 0.67em 0px;line-height: 1.5;color: rgb(51, 51, 51);font-family: -apple-system, system-ui, system-ui, &#39;Helvetica Neue&#39;, &#39;PingFang SC&#39;, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, Arial, sans-serif;white-space: normal;background-color: rgb(255, 255, 255)\">         拿到一份设计稿，我该如何进行移动端开发？ </h1>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 出来混，那些混过去的，迟早是要还的 (￣Д ￣)┍ 。 </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 让我们来解决几个问题： </p>     <h2         style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">         1. 什么是 viewport ? 它的的作用是啥？ </h2>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 提到&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>，之前总感觉挺突兀的，但是当我最近做移动端项目时，突然关注到一直被忽略的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签的时候，才恍然大悟（o(╯□╰)o）。那么，首先让我们来了解一下&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签☛<a             target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F94d7c317c9a8\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">一直被忽略的meta标签了解一下</a>，之后再去看&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>，就很容易记住了，不就是&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">meta</code>&nbsp;标签中         name 属性的一个值嘛。 </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 那么， 它的作用是啥呢？要了解它具体的作用，我们需要先来了解一些相关的基本知识。 </p>     <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\"> 视口类型 </h4>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;指浏览器的窗口，即浏览器上用来显示网页的那部分区域，是用户网页的可视区域。     </p>     <blockquote         style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> <code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;的功能在于控制你网站的最高块状（block）容器：<code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>元素。可以理解为&nbsp;<code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;是容纳&nbsp;<code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>&nbsp;元素的元素。<code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">&lt;html&gt;</code>&nbsp;元素的宽度为浏览器的宽度，即为&nbsp;<code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;宽度的100%。（<a                 target=\"_blank\"                 href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.w3cplus.com%2Fcss%2Fviewports.htm\"                 style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">原文</a>）         </p>     </blockquote>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">         在移动端和pc端，视口是不同的。pc端的视口是浏览器窗口区域，而在移动端则有三个不同的视口概念：<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>、<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">视觉视口</code>、<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>。     </p>     <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">layout viewport（布局视口）</code>：网页布局的基准窗口，在PC浏览器上，相当于当前浏览器的窗口大小（不包括borders                 、margins、滚动条）。在移动端，布局视口被赋予一个默认值，大部分为980px，这保证PC的网页可以在手机浏览器上呈现，但是非常小，用户可以手动对网页进行放大。 可以通过&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">document.documentElement.clientWidth/clientHeight</code>&nbsp;获取网页在标准模式下的布局视口大小。             </p>         </li>         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">visual viewport（视觉视口）</code>：用户在移动设备屏幕上能看到的那部分区域。                 可以通过&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">window.innerWidth / innerHeight</code>&nbsp;来获取视觉视口大小。             </p>         </li>         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">ideal viewport（理想视口）</code>：网站页面在移动端展示的理想大小。使页面的宽度跟设备宽度一致（布局视口=理想视口                 = 视觉视口），我们就能在移动屏幕上看到正常舒服的页面。 可以通过调用&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">screen.width / height</code>&nbsp;来获取理想视口大小。             </p>         </li>     </ul>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> （\uD83D\uDC49&nbsp;<a target=\"_blank\"             href=\"https://juejin.im/post/5bfa99e0e51d4555557d26c6\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">viewport移动端适配</a>、<a             target=\"_blank\" href=\"https://juejin.im/post/5cddf289f265da038f77696c#heading-28\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">关于移动端适配，你必须要知道的</a>）     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img alt=\"布局视口\" class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img alt=\"视觉视口\" class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img alt=\"理想视口\" class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <blockquote         style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> <code                 style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;的设置不会对             PC 页面产生影响，但对于移动页面却很重要。 </p>     </blockquote>     <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\"> 属性介绍 </h4>     <table width=\"NaN\">         <thead style=\"background: rgb(246, 246, 246);color: rgb(0, 0, 0)\">             <tr class=\"firstRow\">                 <th style=\"padding: 1rem 0.6rem;line-height: 2rem\"> 属性 </th>                 <th style=\"padding: 1rem 0.6rem;line-height: 2rem\"> 含义 </th>                 <th style=\"padding: 1rem 0.6rem;line-height: 2rem\"> 取值 </th>             </tr>         </thead>         <tbody>             <tr>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> width </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义视口的宽度，单位为像素 </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 正整数或设备宽度device-width </td>             </tr>             <tr style=\"background-color: rgb(252, 252, 252)\">                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> height </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义视口的高度，单位为像素 </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 正整数或device-height </td>             </tr>             <tr>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> initial-scale </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义初始缩放值 </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 整数或小数 </td>             </tr>             <tr style=\"background-color: rgb(252, 252, 252)\">                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> minimum-scale </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义缩小最小比例，它必须小于或等于maximum-scale设置                 </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 整数或小数 </td>             </tr>             <tr>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> maximum-scale </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义放大最大比例，它必须大于或等于minimum-scale设置                 </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 整数或小数 </td>             </tr>             <tr style=\"background-color: rgb(252, 252, 252)\">                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> user-scalable </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> 定义是否允许用户手动缩放页面，默认值yes </td>                 <td style=\"padding: 1rem 0.6rem;line-height: 2rem;min-width: 10rem\"> yes/no </td>             </tr>         </tbody>     </table>     <h4 style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 16px\"> 基本用法和作用 </h4>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no&quot;&gt; 复制代码</pre>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 上面这个基本的设置： </p>     <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device-width</code>：表示让&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;的宽度等于设备宽度；             </p>         </li>         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">initial-scale=1</code>：表示页面的初始缩放比例为1，相当于让&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">视觉视口</code>&nbsp;等于&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>；             </p>         </li>         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">maximum-scale=1.0</code>&nbsp;表示页面的最大缩放比为1；             </p>         </li>         <li>             <p> <code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">user-scalable=no</code>&nbsp;表示不允许用户对页面进行缩放操作。             </p>         </li>     </ul>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> \uD83C\uDF1F<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">viewport</code>&nbsp;属性的<span             style=\"font-weight: 700\">作用</span>，就是让&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;通过缩放来适配屏幕宽度，<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device.width</code>&nbsp;仅仅是让&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;初始大小等于设备宽度，后面设置的<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">initial-scale</code>&nbsp;是用来缩放&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;大小，而且默认是&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;初始大小等于设备宽度，也就是所谓的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">理想视口</code>。     </p>     <h2         style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">         2. 什么是 rem？它的布局原理是什么？ </h2>     <blockquote         style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> rem（font size of the root             element）：是指相对于根元素的字体大小的单位，其布局的本质是等比缩放，一般是基于宽度。 </p>     </blockquote>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 将设计稿转化为手机屏幕上的内容，就类似于画地图，按照一定的比例进行缩小绘制： </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <h2         style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">         3. 为什么要进行 scale 缩放？scale 与 dpr 的关系？ </h2>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <span style=\"font-weight: 700\">dpr ( device             pixel ratio)</span>：设备像素比，即设备物理像素与逻辑像素(css像素)的比例。 </p>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">window.devicePixelRatio 复制代码</pre>     <ul style=\"padding: 0px 0px 0px 28px\" class=\" list-paddingleft-2\">         <li>             <p> web前端领域，像素分为&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>&nbsp;和&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>；             </p>         </li>         <li>             <p> 一个&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>&nbsp;的大小是可变的，比如用户缩放页面的时候，实际上就是在缩小或放大&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS像素</code>，而&nbsp;<code                     style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>&nbsp;无论大小还是数量都是不变的。             </p>         </li>     </ul>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 【设计稿】：设计师给的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">750px</code>&nbsp;宽的设计稿是根据<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素</code>（<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">device pixel，物理像素</code>）为单位制作的设计稿。     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 【web页面编写】：前端工程师在编码 web 页面时所写的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">CSS 像素</code>&nbsp;则需要根据&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">设备像素比</code>&nbsp;来进行换算。     </p>     <blockquote         style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> 设备像素比(DPR) = 设备像素个数 /             理想视口CSS像素个数(device-width) ，则： </p>         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> CSS像素 = 设计稿像素/dpr。 </p>     </blockquote>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 缩放会影响&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">布局视口</code>&nbsp;的大小，当我们在移动端对页面进行放大和缩小时，实际上是在改变         CSS 像素的大小，而&nbsp;<span style=\"font-weight: 700\">scale 缩放的目的就是为了使 CSS 像素适应移动端的设备像素</span>，而这个缩放是通过两个关键的元素设置来实现的：     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">width=device-width,initial-scale=1/dpr</code>     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">         做的事情就是先把布局视口放大dpr倍，然后再整体缩放相应倍数以适应设备尺寸，这样就能够使css像素和设备物理像素一对一了。 </p>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">var isAndroid = win.navigator.appVersion.match(/android/gi); var isIPhone = win.navigator.appVersion.match(/iphone/gi); var devicePixelRatio = win.devicePixelRatio; if (isIPhone) {     // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案     if (devicePixelRatio &gt;= 3 &amp;&amp; (!dpr || dpr &gt;= 3)) {                         dpr = 3;     } else if (devicePixelRatio &gt;= 2 &amp;&amp; (!dpr || dpr &gt;= 2)){         dpr = 2;     } else {         dpr = 1;     } } else {     // 其他设备下，仍旧使用1倍的方案     dpr = 1; } scale = 1 / dpr; 复制代码</pre>     <blockquote         style=\"margin: 22px 0px;border-left: 4px solid rgb(203, 203, 203);padding: 1px 23px;color: rgb(102, 102, 102);background-color: rgb(248, 248, 248)\">         <p style=\"line-height: inherit;margin-top: 10px;margin-bottom: 10px\"> \uD83D\uDCA1rem             是为了解决不同机型不同宽度的问题，scale是为了解决dpr的问题。移动端自适应与dpr是无关的。 </p>     </blockquote>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\">         淘宝方案中采用了dpr用于解决1px的问题，而网易方案并没有引入dpr，布局视口没有放大，整个页面也没有缩放，但是并不影响与设计图的比例。 </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> ➹&nbsp;<a target=\"_blank\"             href=\"https://juejin.im/post/5b346e8f5188251e1d39bd09\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">真的，移动端尺寸自适应与dpr无关</a>     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> ➹&nbsp;<a target=\"_blank\"             href=\"https://link.juejin.im/?target=https%3A%2F%2Fwww.kancloud.cn%2Fchandler%2Fweb_app%2F591334\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">详解适配相关概念</a>     </p>     <hr />     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 明白了上述几个问题了之后，我们就掌握了移动端自适应的精髓，从而可以进行实战开发了。 </p>     <h2         style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">         \uD83D\uDE4B拿到设计稿，该怎么下手？ </h2>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 通过上面的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>&nbsp;换算，我们能够知道，如何把视觉稿（<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">750px</code>）中元素的&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">px</code>&nbsp;转换成&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>。     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> （1）设置 html font-size，如将手机屏幕分成10份： </p>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">&lt;script&gt;     var dpr = window.devicePixelRatio;     var meta = document.createElement(&#39;meta&#39;);     // dpr     meta.setAttribute(&#39;content&#39;, &#39;initial-scale=&#39; + 1 / dpr + &#39;, maximum-scale=&#39; + 1 / dpr + &#39;, minimum-scale=&#39; + 1 / dpr + &#39;, user-scalable=no&#39;);     document.getElementsByTagName(&#39;head&#39;)[0].appendChild(meta);     // rem     document.addEventListener(&#39;DOMContentLoaded&#39;, function (e) {         document.getElementsByTagName(&#39;html&#39;)[0].style.fontSize = window.innerWidth / 10 + &#39;px&#39;;     }, false); &lt;/script&gt; 复制代码</pre>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> （2）假设元素宽度为&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">300px</code>，则元素宽度：     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 可以通过以下的方案来实现自动转换： </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> ✔&nbsp;<a target=\"_blank\"             href=\"https://link.juejin.im/?target=https%3A%2F%2Fsass-lang.com%2Fdocumentation%2Fat-rules%2Ffunction\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">Scss</a>&nbsp;方案     </p>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">$ue-width: 750; /* ue图的宽度 */ @function px2rem($px) {   @return #{$px/$ue-width*10}rem; } p {   width: px2rem(100); } 复制代码</pre>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> ✔ vscode 中进行&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">px</code>&nbsp;到&nbsp;<code             style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 0.87em;padding: 0.065em 0.4em;color: rgb(255, 80, 44);background-color: rgb(255, 245, 245);border-radius: 2px;overflow-x: auto\">rem</code>&nbsp;的转换：<a             target=\"_blank\" href=\"https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fcipchk%2Fvscode-cssrem\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">vscode-cssrem</a>     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> ✔&nbsp;<a target=\"_blank\"             href=\"https://link.juejin.im/?target=https%3A%2F%2Fgithub.com%2Fcuth%2Fpostcss-pxtorem\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">postcss-pxtorem</a>&nbsp;方案     </p>     <pre         style=\"font-family: Menlo, Monaco, Consolas, &#39;Courier New&#39;, monospace;font-size: 1em;line-height: 1.75;overflow: auto;position: relative\">// postcss.config.js const pxtorem = require(&#39;postcss-pxtorem&#39;); const pxtoremOpts = {     rootValue: 16,  // 根字体大小，默认16     unitPrecision: 5,  // 精度     propList: [&#39;font&#39;, &#39;font-size&#39;, &#39;line-height&#39;, &#39;letter-spacing&#39;],  // 可以将px转换成rem的属性     selectorBlackList: [],  // 选择器忽略并保留px     replace: true,  // 替换包含rems的规则     mediaQuery: false,  // 是否允许在媒体查询中转换px     minPixelValue: 2  // 设置要替换的最小像素值 }; module.exports = {   plugins: [     pxtorem(pxtoremOpts),   ], }; 复制代码</pre>     <h2         style=\"line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 24px;border-bottom: 1px solid rgb(236, 236, 236)\">         5. 常见移动端分辨率 </h2>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p> <img class=\"lazyload inited loaded\"             src=\"https://staticcdn.changguwen.com/cms/img/201999/0f927d55-a4c4-4586-8335-7e1e1409c186-1568021689276.jpg\" />     </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> <br /> </p>     <p style=\"line-height: inherit;margin-top: 22px;margin-bottom: 22px\"> 点击&nbsp;<a target=\"_blank\"             href=\"https://link.juejin.im/?target=https%3A%2F%2Fmaterial.io%2Fresources%2Fdevices%2F\"             style=\";background-color: transparent;cursor: pointer;color: rgb(2, 105, 200);border-bottom: 1px solid rgb(209, 233, 255)\">DEVICE             METRICS</a>&nbsp;查看更多终端设备的参数。 </p>     <p> <br /> </p> </body>   </html>";
//        String msg = "<!DOCTYPE html> <html lang=\"en\">  <head>     <meta charset=\"UTF-8\">     <meta name=\"viewport\" content=\"initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width\">     <style>         * {             margin: 0;             padding: 0         }          img {             width: 100%;         }     </style> </head>  <body>         <p><img src=\"https://staticcdn.changguwen.com/cms/img/2019830/35b0fde7-3ce3-4d64-a8fd-e3b98e25e6ae-1567151264353.jpg\"><img src=\"https://staticcdn.changguwen.com/cms/img/2019830/c2d5e8df-4ddb-4fa4-a04b-bcec5ec7960f-1567151268924.jpg\"></p> </body>   </html>";
        //加载html代码
        tbsWebview.loadData(msg, "text/html", "UTF-8");
//        tbsWebview.loadUrl("https://blog.csdn.net/xzytl60937234/article/details/55255424");

//获取计算h5中的图片数量
//        String jsimg = "function()\n { var imgStrs=[]; var imgs = document.getElementsByTagName(\"img\");for(var i = 0; i < imgs.length; i++){  imgStrs.push(imgs[i].src);  (function (position){ imgs[i].onclick = function()\n{android.startPhotoActivity(this.src,position);}})(i)} return imgStrs;}";
        String jsimg = "function()\n { var imgStrs=[]; var imgs = document.getElementsByTagName(\"img\");for(var i = 0; i < imgs.length; i++){  imgStrs.push(imgs[i].src);  imgs[i].i = i; imgs[i].onclick = function()\n{android.startPhotoActivity(this.src,this.i);}} return imgStrs;}";

        tbsWebview.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageFinished(WebView webView, String s) {
                tbsWebview.evaluateJavascript("javascript:(" + jsimg + ")()", new ValueCallback<String>() {
                    @Override
                    public void onReceiveValue(String value) {
                        try {
                            List<String> list = new ArrayList<>();
                            JSONArray jsonArray = new JSONArray(value);
                            for (int i = 0; i < jsonArray.length(); i++) {
                                list.add(jsonArray.optString(i));
                            }
                            Toast.makeText(HtmlWebViewShowAct.this, "共" + list.size() + "张", Toast.LENGTH_SHORT).show();
                            Log.e("zyt", "list==" + list.size());
                        } catch (JSONException e) {
                            e.printStackTrace();
                        }
                        Log.e("zyt", "onReceiveValue==" + value);
                        //此处为 js 返回的结果
                    }
                });
            }
        });
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ButterKnife.bind(this);
        //布局中嵌套了ScrollView，滑动其实是ScrollView在滑动，所以要想测试布局中做下调整
        tbsWebview.setOnCustomScrollChangeListener((l, t, oldl, oldt) -> {
            //WebView的总高度
            float webViewContentHeight = tbsWebview.getContentHeight() * tbsWebview.getScale();
            //WebView的现高度
            float webViewCurrentHeight = (tbsWebview.getHeight() + tbsWebview.getScrollY());
            Log.e("snow", "webViewCurrentHeight===========" + webViewCurrentHeight);
            Log.e("snow", "==========webViewContentHeight===========" + webViewContentHeight);
            if (Math.abs(webViewContentHeight - webViewCurrentHeight) < 5) {//理论是=0，但发现滑动总差4.5
                Log.e("snow", "WebView滑动到了底端");
            } else if (tbsWebview.getScrollY() == 0) {
                Log.e("snow", "WebView滑动到了顶部===");
            }
        });
    }

    class JsObject {

        @JavascriptInterface
        public void startPhotoActivity(String jsonData, int position) {
            Toast.makeText(HtmlWebViewShowAct.this, "当前地址：===" + position + "===" + jsonData, Toast.LENGTH_SHORT).show();
        }
    }


}
